<template>
  <div class="page-container">
    <!-- 统计信息 -->
    <van-sticky>
      <div class="stats-bar">
        <div class="stat-item">
          <span class="stat-number">{{ words.length }}</span>
          <span class="stat-label">总词汇</span>
        </div>
        <div class="stat-item">
          <span class="stat-number">{{ favoriteWords.length }}</span>
          <span class="stat-label">已收藏</span>
        </div>
        <div class="stat-item">
          <span class="stat-number">{{ unfamiliarWords.length }}</span>
          <span class="stat-label">很陌生</span>
        </div>
        <div class="stat-item">
          <span class="stat-number">{{ familiarWords.length }}</span>
          <span class="stat-label">有印象</span>
        </div>
      </div>
    </van-sticky>

    <!-- 单词列表 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="word-list">
          <div
            v-for="word in words"
            :key="word.id"
            class="word-card card"
            @click="goToDetail(word.id)"
          >
            <div class="word-content">
              <div class="word-header">
                <h3 class="word-title">{{ word.word }}</h3>
                <div class="favorite-actions">
                  <!-- 很陌生按钮 -->
                  <van-button
                    :class="['favorite-btn', { 'unfamiliar': getFavoriteLevel(word.id) === 1 }]"
                    size="small"
                    round
                    @click.stop="toggleFavorite(word.id, 1)"
                  >
                    <van-icon name="question" />
                  </van-button>
                  <!-- 有印象按钮 -->
                  <van-button
                    :class="['favorite-btn', { 'familiar': getFavoriteLevel(word.id) === 2 }]"
                    size="small"
                    round
                    @click.stop="toggleFavorite(word.id, 2)"
                  >
                    <van-icon name="like" />
                  </van-button>
                </div>
              </div>
              <p class="word-pronunciation">{{ word.pronunciation }}</p>
              <p class="word-meaning">{{ word.meaning }}</p>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>


  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useWordStore } from '@/stores/word'
import { showToast } from 'vant'

const router = useRouter()
const wordStore = useWordStore()

const refreshing = ref(false)
const loading = ref(false)
const finished = ref(false)

// 计算属性 - 使用响应式引用
const words = computed(() => wordStore.words)
const favoriteWords = computed(() => wordStore.favoriteWords)
const unfamiliarWords = computed(() => wordStore.unfamiliarWords)
const familiarWords = computed(() => wordStore.familiarWords)

// 方法
const onRefresh = async () => {
  refreshing.value = true
  await wordStore.loadWords()
  refreshing.value = false
  showToast('刷新成功')
}

const onLoad = () => {
  // 模拟加载更多
  setTimeout(() => {
    loading.value = false
    finished.value = true
  }, 1000)
}

const goToDetail = (id) => {
  router.push(`/word/${id}`)
}

const toggleFavorite = (wordId, level) => {
  wordStore.toggleFavorite(wordId, level)
  const currentLevel = wordStore.getFavoriteLevel(wordId)
  if (currentLevel === level) {
    const levelText = level === 1 ? '很陌生' : '有印象'
    showToast(`已标记为${levelText}`)
  } else if (currentLevel === 0) {
    showToast('已取消收藏')
  } else {
    const levelText = currentLevel === 1 ? '很陌生' : '有印象'
    showToast(`已更改为${levelText}`)
  }
}

const getFavoriteLevel = (wordId) => {
  return wordStore.getFavoriteLevel(wordId)
}

// 生命周期
onMounted(() => {
  if (words.value.length === 0) {
    wordStore.loadWords()
  }
})
</script>

<style scoped>
.word-list {
  padding: 0 2px;
}

.word-card {
  margin-bottom: 8px;
  cursor: pointer;
}

.word-content {
  padding: 6px;
}

.word-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
}

.word-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
}

.favorite-actions {
  display: flex;
  gap: 8px;
}

.favorite-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: white;
  color: var(--text-color-3);
  transition: all 0.3s;
}

.favorite-btn.unfamiliar {
  background: var(--warning-color);
  border-color: var(--warning-color);
  color: white;
}

.favorite-btn.familiar {
  background: var(--success-color);
  border-color: var(--success-color);
  color: white;
}

.word-pronunciation {
  font-size: 14px;
  color: var(--text-color-2);
  margin-bottom: 4px;
  font-style: italic;
}

.word-meaning {
  font-size: 14px;
  color: var(--text-color-3);
  line-height: 1.5;
}

.stats-bar {
  display: flex;
  background: white;
  padding: 12px;
  margin: 12px 12px 12px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stat-item {
  flex: 1;
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: var(--primary-color);
}

.stat-label {
  font-size: 12px;
  color: var(--text-color-3);
}
</style>